<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <script>
        $(function () {
            var echart = echarts.init($('#echarts1')[0])
            $.get('http://118.31.70.130:7878/api/echart/age', function (res) {
                // console.log(res);

                const data = res.data
                let name = []
                for (let i = 0; i < data.length; i++) {
                    name.push(data[i].name)
                }
                // console.log(name);
                // console.log(data);
                var option = {
                    legend: {
                        orient: "vertical",
                        left: "left",
                        data: name
                    },
                    series: [{
                        type: "pie",
                        data: data
                    }]
                }
                echart.setOption(option)
            })
        })



        $(function () {
            var echart = echarts.init($('#echarts2')[0])
            $.get('http://118.31.70.130:7878/api/echart/job', function (res) {
                // console.log(res);
                const data = res.data
                const job = data["2019"]
                let name = []
                console.log(job);
                const job2 = data["2020"]
                let value1 = []
                let value2 = []
                for (let i = 0; i < job.length; i++) {
                    value1.push(job[i].total)
                }

                for (let i = 0; i < job2.length; i++) {
                    value2.push(job[i].total)
                }

                console.log(value1);
                for (let i = 0; i < job.length; i++) {
                    name.push(job[i].job)

                }
                // console.log(data);
                // console.log(name);


                option = {
                    legend: {
                        data: ["2019", "2020"]
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "category",
                        data: name
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [{
                        name: '2019',
                        type: "bar",
                        data: value1
                    },
                    {
                        name: "2020",
                        type: "bar",
                        data: value2
                    }]
                }




                echart.setOption(option)
            })
        })

    </script>
    <div id="echarts1" style="height: 300px;width:600px"></div>
    <div id="echarts2" style="height: 300px;width:600px"></div>
</body>

</html>